<template>
  <div class="wrap" :class="{limit: isLimit}" ref="articleContent">
    <div v-if="isLimit" class="load-more">
      <div class="arrow-content" @click="showLeft">
        <span>继续阅读全文</span>
        <i class="fa fa-dropdown"></i>
      </div>
    </div>
    <div
      v-if="content"
      v-html="content"
      @click="listen"
      class="article-content"
    ></div>
    <ul class="tags-wrap" v-if="tags">
      <li
        v-for="tag in tags"
        :key="tag.id"
        class="tag-item"
      >
        <van-tag
          class="vtag"
          round
          @click="toTag(tag)"
        >
          {{ tag.name }}
        </van-tag>
      </li>
    </ul>
    <div class="toolbar">
      <div class="toolbar-item" @click="showToast">
        <van-icon name="star" />
        <span>{{favorite}}</span>
      </div>
      <div class="toolbar-item" @click="showToast">
        <van-icon name="good-job" />
        <span>{{like}}</span>
      </div>
      <div class="toolbar-item" @click="openShare">
        <van-icon name="share" />
        <span>{{share}}</span>
      </div>
    </div>
    <share-sheet
      ref="share"
      :title="shareTitle"
      :pic="sharePic"
      :url="shareUrl"
    />
  </div>
</template>

<script>
import { Tag as VanTag, Icon as VanIcon, Toast } from 'vant'
import ShareSheet from '@/components/share-sheet/ShareSheet.vue'
export default {
  name: 'ArticleContent',
  components: {
    VanTag,
    VanIcon,
    ShareSheet
  },
  props: {
    content: {
      type: String
    },
    tags: {
      type: Array
    },
    favorite: {
      type: Number
    },
    like: {
      type: Number
    },
    share: {
      type: Number
    },
    shareTitle: {
      type: String
    },
    sharePic: {
      type: String
    }
  },
  data () {
    return {
      isLimit: true,
      shareUrl: location.href
    }
  },
  watch: {
    content: {
      handler (newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.isLimit = this.$refs.articleContent.scrollHeight > this.$refs.articleContent.clientHeight
          })
        } else {
          this.isLimit = false
        }
      }
    }
  },
  /* mounted () {
    console.log(this.$refs.articleContent.clientHeight)
  }, */
  methods: {
    showLeft () {
      this.isLimit = false
    },
    toTag (tag) {
      this.$router.push({ name: 'tag', params: { tid: tag.id } })
    },
    toVideo (bvid) {
      this.$router.push({ name: 'video', params: { bvid } })
    },
    listen (e) {
      const { target: { dataset } } = e
      if (dataset.bvid) {
        this.toVideo(dataset.bvid)
      }
    },
    showToast () {
      // TODO:
      Toast('功能开发中，请稍候...')
    },
    openShare () {
      this.$refs.share.show()
    }
  }
}
</script>

<style lang="scss">
  .article-content {
    p, .img-box {
      margin: 0;      
    }
    .img-box {
      margin-bottom: 25px;
    }
    .color-default{
      color: #222;
    }
    .font-size-20 {
      font-size: 20px;
    }
    a{
      color: $theme-color;
    }
    img{
      display: block;
      max-width: 100%;
      height: auto;
      border: none;
      margin: 0 auto;
    }
    figure{
      margin: 0;
      padding: 0;
    }
    figcaption{
      color: $color-text-secondary;
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
      margin-top: 10px;
      display: inline-block;
      width: 90%;
    }
    .video-wrap{
      display: flex;
      justify-content: space-between;
    }
    .video-item{
      color: $color-text-secondary;
      width: 48%;
      box-sizing: border-box;
      border-radius: 6px;
      position: relative;
    }
    .video-link{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
    }
    .video-cover{
      @include cover(300, 188);
      @include border1px(#e7e7e7, 1px 1px 0);
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      box-sizing: border-box;
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
      /* .play-wrap{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(-180deg,transparent,rgba(0,0,0,.2));
        .fa{
          color: rgba(255,255,255,.5);
          font-size: 30px;
        }
      } */
    }
    .video-info{
      height: 77px;
      vertical-align: top;
      @include border1px(#e7e7e7, 0 1px 1px);
      padding: 8px 10px 0;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      background-color: rgba(244, 244, 245, .3);
      box-sizing: border-box;
    }
    .video-title{
      height: 38px;
      line-height: 19px;
      font-size: 12px;
      overflow: hidden;
      margin-bottom: 6px;
      color: $color-text-regular;
    }
    .video-author{
      display: flex;
      height: 17px;
      line-height: 17px;
      .fa{
        font-size: 16px;
        vertical-align: middle;
        margin-right: 5px;
      }
      .name{
        height: 17px;
        max-width: 80px;
        vertical-align: middle;
        font-size: 12px;
        @include max-lines(1);
      }
    }
    .copyright{
      margin: 0;
      font-size: 12px;
      color: $color-text-secondary;
    }
  }
</style>

<style lang="scss" scoped>
  .wrap{
    position: relative;
    &.limit{
      overflow: hidden;
      max-height: 1500px;
    }
  }
  .article-content{
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
    text-align: left;
    letter-spacing: 0;
    padding: 0 16px;
    color: $color-text-regular;
  }
  .tags-wrap{
    margin-top: 12px;
    padding: 0 16px;
    .tag-item{
      display: inline-block;
      padding-right: 12px;
      margin-bottom: 10px;
    }
    .vtag{
      padding: 8px 18px;
      color: $color-text-regular;
      background-color: $color-grey;
      font-size: 12px;
    }
  }
  .toolbar{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: {
      top: 20px;
      bottom: 20px;
    };
    &-item{
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 12px;
      color: $color-text-secondary;
    }
    .van-icon{
      margin-bottom: 4px;
      color: $color-text-primary;
      font-size: 22px;
    }
  }
  .load-more{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    &:before{
      content: '';
      display: block;
      width: 100%;
      height: 120px;
      background-image: linear-gradient(0deg,#fff,rgba(255,255,255, 0));
    }
    .arrow-content{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: {
        top: 10px;
        bottom: 10px;
      }
      color: $theme-color;
      background-color: #fff;
    }
  }
</style>
